<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小人移动</title>
    <link rel="stylesheet" href="css/public.css">
    <style>
        div {
            margin-left: 100px
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li><b>小人移动</b></li>
        </ul>
        <canvas id="mycanvas"></canvas>
        <img id="img" src="img/DMMban.png" alt="">
    </div>

    <script>
        var img = document.getElementById("img");
        var mycanvas = document.getElementById("mycanvas");
        var context = mycanvas.getContext('2d');

        mycanvas.width = 600;
        mycanvas.height = 400;
        mycanvas.style.border = '1px solid';


        window.onload = function () {
            var imgX = 0,
                imgY = 130,
                imgw = 40,
                imgh = 65,
                px = 0,
                py = 0;
            j = 0;
            i = 0;

            setInterval(setImg, 200);
            function setImg() {
                context.clearRect(px, py, imgw, imgh);
                switch (j) {
                    case 0:
                        imgY = 130;
                        px += 5;
                        imgX = i * imgw;
                        if (px > mycanvas.width - imgw) {
                            j = 1;
                        };
                        break;

                    case 1:
                        imgY = 65;
                        px -= 5;
                        imgX = i * imgw
                        if (px < 0) {
                            j = 0;
                        };
                        break;

                    case 2:
                        imgY = 0;
                        py += 5;
                        imgX = i * imgw;
                        if (py > mycanvas.height - imgh) {
                            j = 3;
                        };
                        break;

                    case 3:
                        imgY = 195;
                        py -= 5;
                        imgX = i * imgw;
                        if (py < 0) {
                            j = 2;
                        };
                        break;
                }
                context.drawImage(img, imgX, imgY, imgw, imgh, px, py, imgw, imgh);
                i++;
                if (i > 3) {
                    i = 0;
                }
            }
            document.onkeydown = function (ev) {
                console.log(ev.keyCode);  //上38 下40 左37 右39
                switch (ev.keyCode) {
                    case 38:
                        j = 3;
                        break;
                    case 40:
                        j = 2;
                        break;
                    case 37:
                        j = 1;
                        break;
                    case 39:
                        j = 0;
                        break;
                }
            }
        }

    </script>
</body>

</html>